<template>
  <div px-16rpx mb-200rpx>
    <div>
      <!-- <order /> -->
      <div bg-white p-36rpx>
        <column v-if="applyInfo" :res="applyInfo" :price="applyInfo.goodsPrice" :image="applyInfo.image" />
      </div>
    </div>
    <div>
      <div card>
        <div my-20rpx p-36rpx flex flex-a-c flex-j-sb>
          <div font-bold text-26rpx>申请数量</div>
          <div text-24rpx color-warmgray flex flex-a-c>
            <nut-input-number v-model="applySaleForm.num" :max="applySaleForm?.num" :min="1" />
          </div>
        </div>
        <div my-20rpx p-36rpx flex flex-a-c flex-j-sb>
          <div font-bold text-26rpx>申请原因</div>
          <div text-24rpx @click="reason.show = true" :class="[applySaleForm.reason ? 'color-black' : 'color-warmgray']"
            flex flex-a-c>
            {{ applySaleForm.reason || '请选择申请原因' }}
            <nut-icon size="12" name="rect-down"></nut-icon>
          </div>
        </div>
      </div>
      <div my-20rpx p-36rpx card flex-a-c flex-j-sb>
        <div font-bold text-26rpx>申请说明</div>
        <div text-24rpx color-warmgray flex flex-a-c mt-20rpx>
          <nut-textarea v-model="applySaleForm.problemDesc"
            :input-style="{ backgroundColor: colors.bgColor, padding: '20rpx' }"  :border-bottom="false"
            placeholder="请输入留言" />
        </div>
      </div>

      <div my-20rpx p-36rpx card flex-a-c flex-j-sb>
        <div font-bold text-26rpx>上传凭证</div>
        <div text-24rpx color-warmgray mt-20rpx flex flex-a-c>
          <uploader @success="($event: any) => { applySaleForm.images.push($event) }"  @delete="($event: any) => { applySaleForm.images.splice($event, 1) }"  :maxNum="5" />
        </div>
      </div>
      <div my-20rpx p-36rpx card flex-a-c flex flex-j-sb>
        <div font-bold text-26rpx>退款方式</div>
        <div text-24rpx color-warmgray flex flex-a-c>
          {{ applyInfo.refundWay == 'ORIGINAL' ? '原路退回' : '账号退款' }}
        </div>
      </div>

      <!-- 判断是否是后台收款   -->
      <div v-if="applyInfo.accountType === 'BANK_TRANSFER' &&
        applyInfo.applyRefundPrice != 0" card>
        <div my-20rpx p-36rpx flex-a-c flex flex-j-sb>
          <div font-bold text-26rpx>银行开户行</div>
          <div text-24rpx color-warmgray flex flex-a-c>
            <nut-input v-model="applySaleForm.bankDepositName" placeholder="请填写银行开户行" :border="false" :input-style="InputStyle" />
          </div>
        </div>
        <div my-20rpx p-36rpx flex-a-c flex flex-j-sb>
          <div font-bold text-26rpx>银行开户名</div>
          <div text-24rpx color-warmgray flex flex-a-c>
            <nut-input v-model="applySaleForm.bankAccountName" placeholder="请填写银行开户名" :border="false" :input-style="InputStyle" />
          </div>
        </div>
        <div my-20rpx p-36rpx flex-a-c flex flex-j-sb>
          <div font-bold text-26rpx>银行账号</div>
          <div text-24rpx color-warmgray flex flex-a-c>
            <nut-input v-model="applySaleForm.bankAccountNumber" placeholder="请填写银行账号" :border="false" :input-style="InputStyle" />
          </div>
        </div>
      </div>
      <div my-20rpx p-36rpx card flex flex-a-c flex-j-sb>
        <div font-bold text-26rpx>商品返回方式</div>
        <div text-24rpx color-warmgray flex flex-a-c>
          快递至第三方卖家
        </div>
      </div>
      <div text-center color-warmgray text-24rpx pb-100rpx>提交服务单后，售后专员可能与您电话沟通，请保持手机畅通</div>
    </div>
    <div h-186rpx></div>
    <submit :loading="loading" title="提交申请" @click="submitSaleApply" />
    <cancelReason @click="callbackReason" :loading="false" ref="reason" v-if="returnReasonType" :type="returnReasonType"
      title="申请原因" />
  </div>
</template>

<script setup lang="ts">
import { applyReturn, getAfterSaleInfo } from "@/api/after-sale";
import cancelReason from "@/components/cancel/index.vue";
import column from "@/components/goods-list/column.vue";
import submit from '@/components/sheet-btn/index.vue';
import uploader from '@/components/upload/index.vue';
import { InputStyle, colors } from '@/constants/injection-key';
import { onLoad } from "@dcloudio/uni-app";
const returnReasonType = ref<string>('')
const applyInfo = ref<any>("")
const loading = ref<boolean>(false)
const reason = ref<any>(null)
const applySaleForm = ref<any>({
  reason: "",
  serviceType: "",
  refundWay: "",
  images: [],
  num: 1,
  problemDesc: "",
  orderItemSn: "",
  applyRefundPrice: "",
  accountType: ""
})
function callbackReason(val: string) {
  applySaleForm.value.reason = val
  reason.value.show = false
}


async function init(sn: string) {
  applySaleForm.value.orderItemSn = sn
  const res = await getAfterSaleInfo(sn)
  if (res.data.success) {
    applyInfo.value = res.data.result
    applySaleForm.value.refundWay = res.data.result.refundWay
    applySaleForm.value.skuId = res.data.result.skuId
    applySaleForm.value.goodsId = res.data.result.goodsId
    applySaleForm.value.num = res.data.result.num
    applySaleForm.value.accountType = res.data.result.accountType;
    applySaleForm.value.applyRefundPrice = res.data.result.applyRefundPrice
  }
}

function handleCheckParams() {
  if (!applySaleForm.value.reason) {
    uni.showToast({
      title: '请填写申请原因',
      icon: 'none'
    })
    return false
  }
  if (!applySaleForm.value.applyRefundPrice) {
    uni.showToast({
      title: '请填写申请说明',
      icon: 'none'
    })
    return false
  }

  if (applySaleForm.value.accountType === "BANK_TRANSFER") {
    // 银行开户行校验
    if (!applySaleForm.value.bankDepositName) {
      uni.showToast({
        title: "请输入银行开户行",
        icon: "none"
      })
      return false;
    }
    // 银行开户名校验
    if (!applySaleForm.value.bankAccountName) {
      uni.showToast({
        title: "请输入银行开户名",
        icon: "none"
      })
      return false;
    }
    // 银行账号校验
    if (!applySaleForm.value.bankAccountNumber) {
      uni.showToast({
        title: "请输入银行账号",
        icon: "none"
      })
      return false;
    }
  }
  return true;
}

async function submitSaleApply() {
  applySaleForm.value.serviceType = returnReasonType.value
  //提交申请前检测参数
  if (!handleCheckParams()) {
    return;
  }


  loading.value = true
  const res = await applyReturn(applySaleForm.value.orderItemSn, applySaleForm.value)
  loading.value = false
  if (res.data.success) {
    uni.redirectTo({
      url: "/pages/mine/aftersale/success",
    });
  }
}

onLoad((options: any) => {
  // 初始化数据
  init(options.sn)
  uni.setNavigationBarTitle({
    title: options.type === 'RETURN_MONEY' ? '申请退款' : '申请退货',
  });
  returnReasonType.value = options.type
})
</script>

<style scoped>
</style>
